<template>
  <el-dialog custom-class="b-dialog-app"
             :show-close="false"
             width="960px"
             :visible.sync="visible">
    <div class="b-dialog-app__content flex"
         v-loading="loading">
      <div class="b-dialog-app__content-left">
        <div class="b-dialog-app__content-left--create">Create</div>
        <div class="b-dialog-app__content-left--own">Your Own Application!</div>

        <div :class="{
          'b-dialog-app__content-left-tab':true,
          'cursor-pointer':true,
          'b-dialog-app__content-left-tab--active':index===active
          }"
             v-for="(item,index) in tabs"
             @click="toggle(index)"
             :key="item.value">
          <ZIcon icon="cuifont icon_no" />
          <span>{{item.label}}</span>
        </div>
      </div>
      <div class="b-dialog-app__content-right flex-1 overflow-hidden flex flex-col">
        <div class="b-dialog-app__content-right-action flex justify-end items-center">
          <ZIcon icon="cuifont icon_help_circle"
                 style="width:28px;height:28px"
                 hover
                 class="cursor_pointer" />
          <ZIcon icon="el-icon-close"
                 style="width:28px;height:28px"
                 @click="close"
                 hover
                 :size="24"
                 class="cursor_pointer close" />
        </div>
        <div class="b-dialog-app__content-right__form flex-1 overflow-auto">
          <CreateAppForm v-if="value === 'add'"
                          :isAddNextTicketApp="isAddNextTicketApp"
                         :step="active"
                         ref="create-app-form"
                         @success="success"
                         :loading.sync="loading" />
          <UpdateAppForm v-if="value === 'edit'"
                         :step="active"
                         :id="id"
                         :version="version"
                         @success="success"
                         ref="update-app-form"
                         :loading.sync="loading" />
        </div>
        <div class="b-dialog-app__content-right__footer flex items-center">
          <span v-if="active !== 0"
                @click="previous"
                class="cursor-pointer b-dialog-app__content-right__footer--previous">
            PREVIOUS STEP
          </span>
          <div class="b-dialog-app__content-right__footer-action flex-1 text-right">
            <el-button size="mini"
                       v-if="active === tabs.length-1"
                       @click="save"
                       type="primary">{{ $t('custom.save') }}</el-button>
            <el-button size="mini"
                       type="primary"
                       v-else
                       @click="next">{{ $t('custom.next') }}</el-button>

          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import ZIcon from '@/components/storybook/z-icon'
import { tabs, statusList } from './index.schema'
import CreateAppForm from './create-app-form.vue'
import UpdateAppForm from './update-app-form.vue'

export default {
  name: 'BDialogApp',
  props: {
    value: String,
    id: String,
    version: String,
    isAddNextTicketApp: Boolean
  },
  components: {
    ZIcon,
    CreateAppForm,
    UpdateAppForm
  },
  data () {
    return {
      tabs,
      statusList,
      active: 0,
      loading: false

    }
  },
  computed: {
    visible: {
      get () {
        return !!this.value
      },
      set (val) {
        const value = val || undefined
        this.$emit('input', value)
      }
    }
  },
  methods: {
    close () {
      this.active = 0
      this.visible = undefined
    },
    toggle (index) {
      const formRef = this.value === 'add' ? 'create-app-form' : 'update-app-form'

      if (index === 2 && this.$refs[formRef].form.type === 2) {
        return
      }
      this.active = index
    },
    next () {
      const formRef = this.value === 'add' ? 'create-app-form' : 'update-app-form'
      if (this.active !== this.tabs.length - 1) {
        if (this.$refs[formRef].form.type === 2 && this.active === 1) {
          this.active = this.active + 2
          return
        }
        this.active++
      }
    },
    previous () {
      const formRef = this.value === 'add' ? 'create-app-form' : 'update-app-form'

      if (this.active !== 0) {
        if (this.$refs[formRef].form.type === 2 && this.active === 3) {
          this.active = this.active - 2
          return
        }
        this.active--
      }
    },
    success () {
      this.close()
      this.$emit('success')
    },
    save () {
      const formRef = this.value === 'add' ? 'create-app-form' : 'update-app-form'

      this.$refs[formRef].onSave()
    }
  }
}
</script>
<style lang="scss">
.b-dialog-app {
  & > .el-dialog__header {
    display: none;
  }
  & > .el-dialog__body {
    padding: 0;
  }
  &__content {
    height: 670px;
    &-left {
      width: 370px;
      height: 100%;
      background-color: #003a8c;
      padding: 70px 28px 32px;
      color: #fff;
      &--create {
        font-size: 24px;
        font-weight: 600;
      }
      &--own {
        font-size: 24px;
        font-weight: 600;
        margin-top: 8px;
        margin-bottom: 70px;
      }
      &-tab {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        padding-left: 8px;
        &--active {
          background-color: #2693ff;
        }
        .z-icon {
          font-weight: 400;
          margin-right: 15px;
        }
      }
    }
    &-right {
      padding: 32px 0 32px 32px;
      &-action {
        padding: 0 32px 10px 0;
        .close {
          margin-left: 20px;
        }
      }
      &__form {
        padding-right: 32px;
      }
      &__footer {
        padding-right: 32px;
        &--previous {
          font-size: 12px;
          font-weight: 600;
          color: #bfbfbf;
          &:hover {
            color: #17b3a3;
          }
        }
      }
    }
  }
}
</style>
